<?php         
$db = new Database;
$auth = Auth::getAuth('current_user');
$user_id = $auth['id'];
$company_id = $auth['company_id'];
?>
    <div class="drag" style="position: fixed;left: 0;bottom: 0;top:0;z-index:1000;margin-top:2px;margin: 32px 0px 0px 0px;border-right: 1px solid #ddd; width: 30px; min-height: 100%;background-color: #fff;">
        <?php
        $userAvatarMessage = $db->query("SELECT * FROM tbuser WHERE online='1' and id!='$user_id' and company_id ='$company_id'","array");
        foreach($userAvatarMessage as $imageData){
            $name = $imageData['firstname'].'-'.$imageData['lastname'];
            echo "<a href=\"javascript:void(0)\" onclick=\"javascript:chatWith('".$imageData['firstname']."')\">";
            //echo "<a class='openChat'>";
        echo myAvatar($imageData['extension'],$imageData['id'],"30","30","border:1px solid #ddd;");
            echo "</a>";
            //echo '</a>';
        }
        ?>
    </div>
    <?php if($auth['steps']=="0"){?>
    <div id="modalBox" style="display: none; position: fixed; opacity: 1; z-index: 11000; left: 50%; margin-left: -330px; top: 100px;">
        
        
    </div>
    <div id="modalBg" style="display: none; opacity: 0.5;"></div>
    <!-- Help File For the steps -->
    <div class="checklistStep" style="z-index: -10000;position: fixed;right: 0;bottom: 0;top:0;margin: 32px 0px 0px 0px;border-left: 1px solid #ddd; width: 190px; min-height: 100%;overflow: auto;background-color: #fff;">
    <?php if($_GET['step']!="4"){ ?>     
        <span class="fontGray">Procedures for Step 2</span>
        <div class="hr"></div>
        <a rel="modalBg" name="test" href="#modalBox" class="helpFileForSteps" data-steps="step2" data-action="helpStep1">
            <span class="fontGray">&nbsp;View Help?</span>
        </a>
            <ul>
                    <li class="step2-1 step2" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        2.1. Enter/set your prefered position for your company.
                    </li>
                <li class="step2-2 step2" style="padding: 5px;border-bottom: 1px solid #ddd;">
                    2.2. Then click <input type="button" class="button-icon" value="submit" /> button to add your created position to your list.
                </li>
                <li class="step2-3 step2" style="padding: 5px;border-bottom: 1px solid #ddd;">
                    2.3. Optional, If you want to edit,delete or deactivate the created position / existing position
                    you need to click those actions like <icon class="icon-edit"></icon> icon, <icon class="icon-remove"></icon> icon, or <icon class="icon-trash"></icon> icon.
                </li>
                <li class="step2-3 step2" style="padding: 5px;border-bottom: 1px solid #ddd;">
                    2.3. If your done setting up all position click step 3 to proceed to the next step.
                </li>
            </ul>
    <?php }else{ ?>
            <span class="fontGray">Procedures for Step 4</span>
            <div class="hr"></div>
            <a rel="modalBg" name="test" href="#modalBox" class="helpFileForSteps" data-steps="step4" data-action="helpStep1">
                <span class="fontGray">&nbsp;View Help?</span>
            </a>
                <ul>
                    <a rel="modalBg" name="test" href="#modalBox" style="color: #000;">
                        <li class="step4-1 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                            4.1. To view the content of every bar shown on step 4,
                            you need to click the <icon class="icon-plus"></icon> icon to open it or collapse the bar.
                        </li>
                    </a>
                    <li class="step4-2 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.2. For Processor button / Processor Status
                    </li>
                    <li class="step4-3 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.2.1. Enter/set your prefered name for your processor button/status
                    </li>
                    <li class="step4-4 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.2.2. Then click <input type="button" class="button-icon" value="submit" /> button to add your created name to your list.
                    </li>
                    <li class="step4-5 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.3. Optional, If you want to edit,delete or deactivate the created name
                        you need to click those actions like <icon class="icon-edit"></icon> icon, <icon class="icon-remove"></icon> icon, or <icon class="icon-trash"></icon> icon.
                    </li>
                    <li class="step4-6 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.4. If your done on step 4 just click on the step 5 to proceed for the last part.
                </li>
                </ul>
    <?php } ?>
    </div>
    <?php
    }
    // Redirect to the next step if it is done
    $fStep = $db->query("SELECT * FROM tborgchart WHERE company_id='$company_id'","numrows");
    if($fStep==0&&$auth['steps']=="0"){
        echo '<meta http-equiv="refresh" content="0;url=/formalistic/org_chart">';
    }
    ?>
    <div class="body_contents">
        <?php if($auth['steps']=="0"){?>
        <div style="text-align: center;">
            <a href="/formalistic/org_chart"><img src="/images/steps/step1.png" style="cursor:pointer;"/></a>
            <a href="/formalistic/administer"><img src="/images/steps/step2<?php if($_GET['step']!="4"){echo "A";} ?>.png" style="margin-left: -30px; cursor:pointer;"/></a>
            <a href="/formalistic/user_management"><img src="/images/steps/step3.png" style="margin-left: -30px; cursor:pointer;"/></a>
            <a href="/formalistic/administer?step=4"><img src="/images/steps/step4<?php if($_GET['step']=="4"){echo "A";} ?>.png" style="margin-left: -30px; cursor:pointer;"/></a>
            <a href="/formalistic/forms"><img src="/images/steps/step5.png" style="margin-left: -30px; cursor:pointer;"/></a>
        </div>
        <?php } ?>
        <ul class="tabs"> 
            
            <li class="<?php if($_GET['step']!="4"){echo "active";} ?> tabSetting" rel="tab1">Positions</li>
            <?php //if($auth['steps']!="0"){?>
            <li class="<?php if($_GET['step']=="4"){echo "active ";} ?>tabSetting" rel="tab2">Action Settings</li>
            <li class="tabSetting" rel="tab3">View Settings</li>
            <?php //} ?>
        </ul>
        <div class="tab_container">
            <?php if($_GET['step']!="4"){?>
            <div id="tab1" class="tab_content">
                <!-- Accordion 3 --->
                <div class="titleBar">
                    <div class="left">
                       <div class="titlePosition">
                            <div style="float: right;margin-top: -3px;"><!--img src="/images/icon/plus.png" class="pull-left plusBox" id="accordion3" data-dropping="accordion3"--></div>
                            <div style="float: left;margin-top: 2px;">Add Position</div>
                       </div>
                    </div>
                    <div class="right align_right">
                    </div>
                </div>
                <div class="Holdercontent accordion3">
                    <div class="top">
                        <div class="holderLeft">
                            <span class="fontGray">Position List</span>
                            <div id="tblAddPosition"></div>
                        </div>
                        <div class="holderRight" style="border-left:1px solid #ddd;width: 48%;margin-left: 10px;min-height: 300px;">
                            <div class="fields">
                                <div class="label fontGray" id="labelObject">Add Position:</div>
                                <div class="input_position">
                                    <textarea class="input-x-medium txtPosition"></textarea>
                                </div>
                            </div>
                            <div class="fields" style="border-bottom: none;margin-top: 5px;">
                                <div class="label fontGray" id="labelObject"></div>
                                <div class="input_position">
                                    <input type="button" class="button-medium btnPosition" value="Submit">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <?php } ?>
            <div id="tab2" class="tab_content" <?php if($_GET['step']=="4"){echo "style='display:block;'";} ?>>
                <!-- Accordion 4 --->
                <div class="titleBar">
                    <div class="left">
                       <div class="titlePosition">
                            <div style="float: right;margin-top: -3px;"><img src="/images/icon/plus.png" class="pull-left plusBox" id="accordion4" data-dropping="accordion4"></div>
                            <div style="float: left;margin-top: 2px;">Action Button</div>
                       </div>
                    </div>
                    <div class="right align_right">
                    </div>
                </div>
                <div class="Holdercontent accordion4 display">
                    <div class="top">
                        <div class="holderLeft">
                            <span class="fontGray">Button List</span>
                            <br /><br />
                                <div id="tblActionButtonList"></div>
                        </div>
                        <div class="holderRight" style="border-left:1px solid #ddd;width: 48%;margin-left: 10px;min-height: 300px;">
                            <div class="fields">
                                <div class="label fontGray" id="labelObject">Add Button:</div>
                                <div class="input_position">
                                    <textarea class="input-x-medium txtbutton"></textarea>
                                </div>
                            </div>
                            <div class="fields" style="border-bottom: none;margin-top: 5px;">
                                <div class="label fontGray" id="labelObject"></div>
                                <div class="input_position">
                                    <input type="button" class="button-medium btnAdminister_add" rel='button' value="Submit">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            <!-- Accordion 5 --->
                <div class="titleBar">
                    <div class="left">
                       <div class="titlePosition">
                            <div style="float: right;margin-top: -3px;"><img src="/images/icon/plus.png" class="pull-left plusBox" id="accordion5" data-dropping="accordion5"></div>
                            <div style="float: left;margin-top: 2px;">Action Status</div>
                       </div>
                    </div>
                    <div class="right align_right">
                    </div>
                </div>
                <div class="Holdercontent accordion5 display">
                    <div class="top">
                        <div class="holderLeft">
                            <span class="fontGray">Action Status List</span>
                            <br /><br />
                                <div id="tblActionStatusList"></div>
                        </div>
                        <div class="holderRight" style="border-left:1px solid #ddd;width: 48%;margin-left: 10px;min-height: 300px;">
                            <div class="fields">
                                <div class="label fontGray" id="labelObject">Add Action Status:</div>
                                <div class="input_position">
                                    <textarea class="input-x-medium txtapp_status"></textarea>
                                </div>
                            </div>
                            <div class="fields" style="border-bottom: none;margin-top: 5px;">
                                <div class="label fontGray" id="labelObject"></div>
                                <div class="input_position">
                                    <input type="button" class="button-medium btnAdminister_add" rel='app_status' value="Submit">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div> 
                
            </div>
            <div id="tab3" class="tab_content">
                <!-- Accordion 2 --->
                <div class="titleBar">
                    <div class="left">
                       <div class="titlePosition">
                            <div style="float: right;margin-top: -3px;"><!--img src="/images/icon/plus.png" class="pull-left plusBox" id="accordion2" data-dropping="accordion2"--></div>
                            <div style="float: left;margin-top: 2px;">View Settings</div>
                       </div>
                    </div>
                </div>
                <div class="Holdercontent accordion2 ">
                    <div class="top">
                        <div style="float: left;width: 30%;padding: 5px;">
                            <span class="fontGray">Set number of Columns</span>
                            <div class="hr"></div>
                            <div class="fields">
                                <div class="label fontGray" id="labelObject"># of Columns:</div>
                                <div class="input_position">
                                    <input type="text" class="input-medium" id="numCols"/>
                                </div>
                            </div>
                            <div class="fields" style="border-bottom: none;margin-top: 5px;">
                                <div class="label fontGray" id="labelObject"></div>
                                <div class="input_position">
                                    <input type="button" class="button-medium" value="Go" id="appendNumCols"/>
                                </div>
                            </div>
                        </div>
                        <div style="float: left;width: 35%;padding: 5px;min-height: 300px;;border-left:1px solid #ddd;border-right:1px solid #ddd;">
                            <span class="fontGray">Set the title of Columns</span>
                            <div class="hr"></div>
                            <div class="showCreatedCols"></div>
                        </div>
                        <div style="float: left;width: 30%;padding: 5px;">
                            <span class="fontGray">Set the value of the Columns</span>
                            <div class="hr"></div>
                            <div class="showFormField"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    setActivNav("administer");
</script>